<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          button {
        /* height: 200px;
            width: 200px; */
        position: fixed;
        left: 32%;
        }
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #000;
        overflow: hidden;
      }
    </style>
</head>
<body>
    <css-doodle>
        :doodle {
          @grid: 25x1 / 18vmin;
        }
        :container {
          perspective: 30vmin;
        }
      
        @place-cell: center;
        @size: 100%;
      
        border: @r(2px) solid @pd(
          #00b8a9, #f8f3d4, #f6416c, #ffde7d
        );
        @random(.1) { border-style: dashed; }
        @random(.1) { border-style: dotted; }
        @random(.1) {
          border-width: @p(3px, 4px);
          border-style: double;
        }
      
        border-radius: 50%;
        transform-style: preserve-3d;
        will-change: transform, opacity;
        animation: scale-up 7s linear infinite;
        animation-delay: calc(-7s / @size() * @i());
      
        @keyframes scale-up {
          0%, 100% {
            transform: translate3d(0, 0, 0) rotate(0);
            opacity: 0;
          }
          10% {
            opacity: 1;
          }
          95% {
            transform:
              translate3d(0, 0, 45vmin)
              rotateX(calc(@p(-1, 1) * @r(30deg, 330deg)))
              rotateY(calc(@p(-1, 1) * @r(30deg, 330deg)))
              rotateZ(calc(@p(-1, 1) * @r(30deg, 330deg)))
          }
        }
        <!-- 善德 明智 博学 -->
        <!-- 无法直接写入文字 -->
        <!-- :after :before -->
      </css-doodle>
      <button>点击下载</button>
      <script src="https://unpkg.com/css-doodle@0.33.1/css-doodle.min.js"></script>
      <script>
        const doodle = document.querySelector('css-doodle');
        // 每次点击刷新css-doodle
        doodle.onclick = function () {
            doodle.update();
            // ----》也可以刷新给定样式 但是会完全覆盖之前的 也是等于重新翻写样式 不能替换部分样式以代替之前同类样式

                 //    
            //  doodle.update(`
            //         @grid: 6 / 8em;
            //         background: rebeccapurple;
            //         margin: .5px;
            //         `);
          //同一节点多次update 展示最后的update样式
            doodle.update(`
        @keyframes scale-up {
          0%, 100% {
            transform: translate3d(0, 0, 0) rotate(0);
            opacity: 0;
          }
          10% {
            opacity: 1;
          }
          95% {
            transform:
              translate3d(0, 0, 45vmin)
              rotateX(calc(@p(-1, 1) * @r(30deg, 280deg)))
              rotateY(calc(@p(-1, 1) * @r(30deg, 280deg)))
              rotateZ(calc(@p(-1, 1) * @r(30deg, 0deg)))
          }
        }
                     `);
        };
        const button = document.querySelector('button');
        button.addEventListener('click', async e => {
            let result = await doodle.export({
                scale: 2,
                download: true,
                // detail:true,
                // name: 'Per aspera ad astra.循此苦旅，以达天际.'
                //代码照相机
            });
            console.log(result);
       
            // 点击即可下载窗口可视部分的png格式的图片

            // scale: Integer 导出图像的比例 默认1：1 
            // detail: Boolean 返回图像的详细信息 默认false
            // download: Boolean 是否导出图像 默认false
            // name: String 保存的名称 默认返回当前时间戳 例 1678269900388.png
            });
    </script>
</body>
</html>